<!--
 * @Description:
 * @Author: 56208
 * @Date: 2025/4/18 18:50
 * @LastEditors: 56208
 * @LastEditTime: 2025/4/18 18:50
 * @FilePath: D:/vue3-electron-music/src/renderer/src/components/header\index.vue
 -->

<template>
  <div class="h-100 d-al">
    <el-text class="title-font">L o v e M u s i c</el-text>
    <el-input
      v-model="inputStr"
      class="w-256 input-radius"
      size="large"
      placeholder=""
      :prefix-icon="Search"
    />
    <div class="ml-auto d-al c-pointer">
      <img src="../../assets/icon/bell.svg" alt="叮当" />
      <div class="w-192 rounded-22 user-info h-40 ml-12 d-al" @click="handleUser">
        <el-avatar :size="40" :src="userUrl" class="mr-36" />
        <el-text>{{ userName }}</el-text>
      </div>
    </div>
  </div>
  <LoginDialog v-if="loginDialogShow" @close="closeLogin"></LoginDialog>
</template>

<script setup lang="ts">
import { computed, getCurrentInstance, ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { useUserStore } from '@renderer/store/userInfo'
import touxiang from '@renderer/assets/picture/touxiang.svg'
import LoginDialog from './components/loginDialog.vue'
const { proxy } = getCurrentInstance() as any
const userStore = useUserStore()

const loginDialogShow = ref(false)

// 输入框内容
const inputStr = ref('')

// 用户头像
const userUrl = computed(() => {
  return userStore.useInfo.avatarUrl || touxiang
})

// 用户名
const userName = computed(() => {
  return userStore.useInfo.nickname || '请先登录'
})

// 登录状态
const isLogin = computed(() => {
  return userStore.isLogin
})

function closeLogin() {
  loginDialogShow.value = false
}

const handleUser = async () => {
  // 如果还没登录,跳出登录弹框
  if (!isLogin.value) {
    loginDialogShow.value = true
  }
}
</script>

<style scoped lang="less">
.user-info {
  border: 0.5px solid #115def;
  backdrop-filter: blur(20px);
}
.title-font {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  width: 240px;
  color: #191f35;
  font-size: 24px;
}
</style>
